<script lang="ts" setup>
withDefaults(
  defineProps<{
    disabled?: boolean;
    id?: string;
  }>(),
  {
    disabled: false,
    id: undefined,
  },
);

const emit = defineEmits<{
  click: [event: Event];
}>();

const handleClick = (event: Event) => {
  emit('click', event);
};
</script>

<template>
  <fluent-tab :id="id" :disabled="disabled" @click="handleClick">
    <slot name="start"></slot>
    <slot></slot>
    <slot name="end"></slot>
  </fluent-tab>
</template>

<style scoped></style>
